<template>
  <!-- 专业新闻 -->
  <div class="professional_news_list">
    <router-link
      v-for="(item, index) in list"
      :key="index"
      :to="{ name: 'en_professional_details', query: { id: item.id } }"
      class="professional_news_item "
    >
      <el-image class="img" :src="item.image_input" fit="cover" lazy></el-image>
      <div class="news_abstract">
        <h3>{{ item.title }}</h3>
        <p>{{ item.synopsis }}</p>
        <div class="news_time">
          <img src="@/assets/images/news_time.png" alt />
          <span>{{ item.date_time }}</span>
        </div>
        <div class="details_botton">Detail</div>
      </div>
    </router-link>
    <el-pagination
      :page-size="10"
      :total="count"
      background
      layout="prev, pager, next"
      @current-change="pageSize"
      :current-page.sync="currentPage"
    ></el-pagination>
  </div>
</template>
<script>
import { news_article_cate, news_list } from "@/api/news.js";
export default {
  name: "professional",
  data() {
    return {
      ifHidePage: true,
      list: [],
      count: 1,
      currentPage: 1, //当前页数
    };
  },
  // props: {
  //   news_cate: {
  //     type: Array,
  //     default: null
  //   }
  // },
  mounted() {
    this.news_cate = this.$store.state.headTitle.NewsCate.EN;
    let id = this.$store.state.headTitle.NewsCateCurrentEN;
    this.cateId_ = id;
    this.getNews_list_(1, 10, id);
  },
  watch: {
    "$store.state.headTitle.NewsCateCurrentEN": {
      deep: true,
      handler: function(newValue, oldValue) {
          this.cateId_ = newValue
        this.getNews_list_(1, 10, newValue);
      }
    }
  },
  methods: {
    pageSize(page) {
        this.currentPage = page; 
        
      this.getNews_list_(page, 10, this.cateId_);
    },
    getNews_list_(page, limit, cid) {
      news_list({ page, limit, cid }).then(res => {
        res.data.data.map(item => {
          item.time = item.date_time.split("-");
        });
        this.count = res.data.count;
        this.list = res.data.data;
      });
    }
  }
};
</script>
<style scoped src="./sass/news.css"></style>
